<template>
  <div>
    <el-button type="text" @click="addDay">新增</el-button>
    <el-button type="text" @click="deleteAssign">删除</el-button>
    <el-table
      highlight-current-row
      :data="tableData"
      @current-change="handleCurrentChange"
      style="width: 100%">
      <el-table-column
        prop="ynDepartmentName"
        label="部门">
      </el-table-column>
      <el-table-column
        prop="ynAssignName"
        label="人员">
      </el-table-column>
      <el-table-column
        prop="ynDay"
        label="日期">
      </el-table-column>
      <el-table-column
        prop="ynTarget"
        label="业绩">
      </el-table-column>
      <el-table-column
        prop="ynType"
        label="类型">
        <template slot-scope="scope">
          <span>{{ scope.row.ynType === '1' ? '新开' : '续费' }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="" :visible.sync="addDialogFormVisible">
      <el-form :model="form">
        <el-form-item label="日期">
          <el-date-picker
            v-model="form.ynDay"
            format="yyyy-MM-dd"
            type="date"
            @change="changeDate"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="目标">
          <el-input v-model="form.ynTarget" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-radio-group v-model="radioValue" @change="changeRedio">
            <el-radio
              v-for="item in radioOptions"
              :key="item.id"
              :label="item.id">
              {{ item.ynName }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog :fullscreen="true" title="" width="80%" :visible.sync="addDayDialog">
      <el-row :gutter="20">
        <el-col :span="7">

          <el-input
            type="textarea"
            :rows="2"
            :autosize="{ minRows: 14}"
            placeholder="请输入内容"
            v-model="addDayForm.textarea">
          </el-input>
        </el-col>

        <el-col :span="17">

          <el-table
            :data="dayData"
            border
            style="width: 100%">
            <el-table-column
              prop="ynDay"
              label="日期">
              <template v-slot="{ row }">
                <el-input v-model="row.ynDay" size="mini"/>
              </template>
            </el-table-column>
            <el-table-column
              prop="ynSort"
              label="序号" width="80">
              <template v-slot="{ row }">
                <el-input v-model="row.ynSort" size="mini"/>
              </template>
            </el-table-column>
            <el-table-column
              prop="ynDepartmentName"
              label="团队">
              <template v-slot="{ row }">
                <el-input :disabled="true" v-model="row.ynDepartmentName" size="mini"/>
              </template>
            </el-table-column>
            <el-table-column
              prop="ynAssignName"
              label="姓名">
              <template v-slot="{ row }">
                <el-input :disabled="true" v-model="row.ynAssignName" size="mini"/>
              </template>
            </el-table-column>
            <el-table-column
              prop="ynTarget"
              label="业绩" width="100">
              <template v-slot="{ row }">
                <el-input v-model="row.ynTarget" size="mini"/>
              </template>
            </el-table-column>
            <el-table-column
              prop="ynProject"
              label="项目">
              <template v-slot="{ row }">
                <el-input v-model="row.ynProject" size="mini"/>
              </template>
            </el-table-column>
            <el-table-column
              prop="ynType"
              label="类型">
              <template v-slot="{ row }">
                <el-select size="mini" v-model="row.ynType" placeholder="请选择">
                  <el-option
                    key="1"
                    label='新开'
                    value="1">
                  </el-option>
                  <el-option
                    key="2"
                    label="续费"
                    value="2">
                  </el-option>
                </el-select>
                <!--                <el-input :value="row.ynType" size="mini"/>-->
              </template>
            </el-table-column>
          </el-table>
        </el-col>


      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="addDayDialog = false">取 消</el-button>
        <el-button type="primary" size="small" @click="resolver">解 析</el-button>
        <el-button size="small" type="primary" @click="saveOrUpdate">保 存</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import moment from "moment";

export default {
  name: "ynDay",
  created() {
    this.getynDay()
    this.fetchRadioOptions()
  },
  methods: {
    addDay() {
      this.addDayForm.ynDay = moment().format('yyyy-MM-DD');
      this.addDayDialog = true;
    },
    resolver() {
      this.axios.post('/ynDay/resolver', {
        textarea: this.addDayForm.textarea
      }).then(res => {
        if (200 === res.data.code) {
          this.dayData = res.data.data;
        }
      })
    },
    getynDay: function () {
      this.axios.post('/ynDay/list').then(res => {
        if (!!res.data.data) {
          this.tableData = res.data.data;
        }
      })
    },
    changeDate(val) {
      // this.form.ynDay = moment(val).format('yyyy-MM-dd');
    },
    saveOrUpdate() {
      this.axios.post('/ynDay/saveBatch', this.dayData
      ).then(res => {
        if (200 === res.data.code) {
          this.addDayDialog = false;
          this.getynDay();
        }
      })
    },
    update() {
      this.addDialogFormVisible = true;
    },
    deleteAssign() {
      this.axios.post('/ynDay/delete', this.currentRow).then(res => {
        if (200 === res.data.code) {
          this.getynDay();
        }
      })
    },
    fetchRadioOptions() {
      // 假设 getRadioData 是一个返回 Promise 的函数，用来获取接口数据
      this.axios.post('/ynDepartment/list').then(response => {
        this.radioOptions = response.data.data; // 假设响应格式为 { data: [] }
      });
    },
    changeRedio(vId) {
      let obj = {};
      obj = this.radioOptions.find((item) => {  //这里的radioPay就是上面遍历的数据源
        return item.id === vId;  //筛选出匹配数据，这里的value是你遍历数组每一项的value，如果没有对后台返回的数据做处理，一般为id
      });
      this.form.ynDepartmentName = obj.ynName;
      this.form.ynDepartment = obj.id;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    }
  },
  data() {
    return {
      tableData: [],
      currentRow: null,
      form: {
        ynName: '',
        ynDepartment: '',
        ynDepartmentName: '',
        ynDay: '',
        ynTarget: '',
      },
      addDialogFormVisible: false,
      addDayForm: {
        textarea: '',
      },
      dayData: [
        {
          ynDay: moment().format('yyyy-MM-DD'),
          ynTarget: '0',
          ynAssignName: '',
          ynDepartmentName: '',
          ynSort: '',
          ynProject: '',
          ynType: '1',
        }
      ],
      addDayDialog: false,
      radioValue: '', // 选中的单选按钮的值
      radioOptions: [] // 存储从接口获取的数据
    }
  }
}
</script>

<style scoped>

</style>
